/**
 * 学习目标：JSX插值表达式- JSX本身、三元、逻辑运算符
 * 表达式:
 *  1. 变量
 *  2. 基础数据类型：string、number、null、boolean、undefined
 *  3. 引用数据类型: 数组、对象、函数
 *  4. JSX本身、三元、逻辑运算符
 */

import React from 'react';
import ReactDOM from 'react-dom';

const age = 17;

const isShow = true;

const jsx = <h2>我是一段jsx代码, 我也是表达式</h2>;

const divNode = (
  <>
    {/* 三元 */}
    <h1>{age >= 18 ? '城里人' : '太空人'}</h1>
    <h1>{age >= 18 ? <span>城里人</span> : <span>太空人</span>}</h1>
    {/* JSX本身 */}
    <div>{jsx}</div>
    {/* 逻辑运算符 */}
    <div> {isShow && '正常显示'}</div>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
